<template>
  <div class="todo-info">
    <span class="total"
      >{{ total }} {{ total == 1 ? "item" : "items" }} left</span
    >
    <div class="tab">
      <a
        href="#"
        v-for="(item, index) in states"
        :key="index"
        :class="item == state ? 'current' : ''"
        @click.prevent="handleClick(item)"
        >{{ item }}</a
      >
    </div>
    <!-- <button v-show="clear" class="clear" @click="$emit('del-all')"> -->
    <button v-show="clear" class="clear" @click="handleDelAll">
      Clear Completed
    </button>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue"
//定义数据
const states = reactive(["all", "active", "completed"])
let state = ref("all")
//接收父组件传过来的值
let props = defineProps({
  total: {
    type: Number,
    required: true,
  },
  clear: {
    type: Number,
    required: true,
  },
})

//自定义事件
const emit = defineEmits(["toggle", "delAll"])
//定义方法，触发自定义事件
function handleClick(item) {
  state.value = item
  emit("toggle", item)
}
function handleDelAll() {
  emit("delAll")
}
</script>

<style lang="stylus">
@import '../../../assets/styles/theme.styl'
@import '../../../assets/styles/mixins.styl'
.todo-info
  display: flex
  justify-content: space-between
  padding: 5px 15px
  height: 40px
  border-top: 2px solid rgb(192, 196, 204)
  align-items: center
  position: relative
  .total
    color: $font
  .tab
    display: flex
    position: absolute
    left 302px
    top: 10px
    width: 200px
    justify-content: space-around
    a
      primaryBorderBtn()
      &.current
        background-color: $skyblue
        color: white
  .clear
    height: 30px
    infoBtn()
</style>
